<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :refresh="false">
				<!-- <html2canvas class="canvas" ref="canvas" :domId="domId" @renderFinish="renderFinish">
					<view id="poster">
						<div style="position: relative;">
							<img :src="avtivityInfo.img1" style="width: 100%;"></img>
							<img :src="qrcodeImg" class="qrcode-img">
						</div>
					</view>
				</html2canvas> -->
				<div style="background-color: #000000;position: relative;">
					<div class="header-box">
						<image src="../../../static/img/isBack.png" mode="aspectFill" class="image853" @tap="toBack"></image>
						<span class="look-text" @tap="toDetail">查看邀请明细</span>
					</div>
					<div class="big-box">
						<div style="position: relative;width: 89.33vw;height: 100%;border-radius: 4.27vw;z-index: 1;background-color: #000000;"></div>
						<image :src="avtivityInfo.img" mode="widthFix" style="position: relative;width: 89.33vw;height: 100%;border-radius: 4.27vw;z-index: 1;transform: translate3d(0,0,0);"></image>
						<span class="btn pulse-one" @tap="onJoin">参与活动</span>
					</div>
					<div class="enter-box">
						<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
					</div>
					<div class="list-box" style="padding-bottom: 0;" v-if="page.list.length > 0">
						<span class="jiu-font28-fff">榜单排行</span>
						<div :class="{'center': page.list.length == 1,'between':page.list.length == 3}" style="display: flex;position: relative;padding-bottom: 13.6vw;margin-top: 7.47vw;">
							<div class="item-box" v-if="page.list[1]">
								<image src="../../static/img/two.png" mode="aspectFill" class="image64"></image>
								<image :src="page.list[1].user.avatar" mode="aspectFill" class="header-img"></image>
								<span class="jiu-font28-fff" style="margin-top: 2.13vw;width: 19.2vw;overflow: hidden;text-overflow: ellipsis;">{{ page.list[1].user.nickname }}</span>
								<span class="jiu-font24-555">{{ page.list[1].user.uuid }}</span>
							</div>
							 <!-- style="position: absolute;left: 35.53vw;bottom: 8.53vw;" -->
							<div class="item-box" v-if="page.list[0]" :class="{'abs':page.list.length == 2}">
								<image src="../../static/img/one.png" mode="aspectFill" class="image64" style="top: -2.93vw;"></image>
								<image :src="page.list[0].user.avatar" mode="aspectFill" class="header-img"></image>
								<span class="jiu-font28-fff" style="margin-top: 2.13vw;width: 19.2vw;overflow: hidden;text-overflow: ellipsis;">{{ page.list[0].user.nickname }}</span>
								<span class="jiu-font24-555">{{ page.list[0].user.uuid }}</span>
							</div>
							<div class="item-box" v-if="page.list[2]" style="padding-right: 7.2vw;">
								<image src="../../static/img/three.png" mode="aspectFill" class="image64"></image>
								<image :src="page.list[2].user.avatar" mode="aspectFill" class="header-img"></image>
								<span class="jiu-font28-fff" style="margin-top: 2.13vw;width: 19.2vw;overflow: hidden;text-overflow: ellipsis;">{{ page.list[2].user.nickname }}</span>
								<span class="jiu-font24-555">{{ page.list[2].user.uuid }}</span>
							</div>
							<!-- <div class="item-box" style="padding-right: 7.2vw;">
								<image src="../../static/img/three.png" mode="aspectFill" class="image64"></image>
								<image src="@/static/img/swiper.jpg" mode="aspectFill" class="header-img"></image>
								<span class="jiu-font28-fff" style="margin-top: 2.13vw;width: 19.2vw;overflow: hidden;text-overflow: ellipsis;">54484</span>
								<span class="jiu-font24-555">65446</span>
							</div>
							<div class="item-box" style="padding-right: 7.2vw;">
								<image src="../../static/img/three.png" mode="aspectFill" class="image64"></image>
								<image src="@/static/img/swiper.jpg" mode="aspectFill" class="header-img"></image>
								<span class="jiu-font28-fff" style="margin-top: 2.13vw;width: 19.2vw;overflow: hidden;text-overflow: ellipsis;">54484</span>
								<span class="jiu-font24-555">65446</span>
							</div>
							<div class="item-box" style="padding-right: 7.2vw;">
								<image src="../../static/img/three.png" mode="aspectFill" class="image64"></image>
								<image src="@/static/img/swiper.jpg" mode="aspectFill" class="header-img"></image>
								<span class="jiu-font28-fff" style="margin-top: 2.13vw;width: 19.2vw;overflow: hidden;text-overflow: ellipsis;">54484</span>
								<span class="jiu-font24-555">65446</span>
							</div> -->
						</div>
					</div>

					<div class="table-list" v-if="page.list">
						<div class="table-item" v-for="item,index in page.list.slice(3 , 10)">
							<div style="display: flex;align-items: center;">
								<span class="jiu-font28-fff" style="width: 8.53vw;line-height: 8.53vw;background-color: #555555;border-radius: 50%;text-align: center;margin-right: 2.13vw;">{{ item.rank }}</span>
								<span class="jiu-font28-fff">{{ item.user.nickname }}</span>
							</div>
							<span class="jiu-font28-555" style="font-weight: 300;">{{ item.number }}人</span>
						</div>
					</div>
					
					<div class="table-list" v-if="myInfo.rank > 10">
						<div class="table-item">
							<div style="display: flex;align-items: center;">
								<span class="jiu-font28-fff" style="width: 8.53vw;line-height: 8.53vw;background-color: #555555;border-radius: 50%;text-align: center;margin-right: 2.13vw;">{{ myInfo.rank }}</span>
								<span class="jiu-font28-fff">{{ myInfo.user.nickname }}</span>
							</div>
							<span class="jiu-font28-555" style="font-weight: 300;">{{ myInfo.number }}人</span>
						</div>
					</div>
					
					<div class="list-box" style="display: flex;align-items: flex-start;padding-bottom: 6.4vw;margin-top: 0.27vw;" v-if="avtivityInfo.role">
						<image src="../../../static/img/zhuyi.png" mode="aspectFill" class="image427" style="transform: rotate(0);flex-shrink: 0;margin-right: 1.07vw;"></image>
						<div class="jiu-font24-aaa" style="color: #FF9E3E;display: flex;flex-direction: column;">
							<span>活动规则：</span>
							<div v-html="avtivityInfo.role"></div>
						</div>
					</div>
				</div>
			</ma-refresh>
		</ma-body>
		<div class="mask" v-if="show" @tap="show = false">
			<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap.stop="show = false"></image>
			<div class="modal">
				<div class="canvasImg" @tap.stop="show = true">
					<image :src="canvasImg" mode="widthFix"></image>
				</div>
				<div class="button-box">
					<div class="flex-row">
						<div class="flex-column" @tap.stop="save">
							<image src="@/static/img/save.png" mode=""></image>
							<span>长按上图保存图片</span>
						</div>
						<div class="flex-column" @tap.stop="onCopy">
							<image src="@/static/img/copy.png" mode=""></image>
							<span>复制链接</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<canvas canvas-id="canvasId" :style="{height: canvasHeight,width:canvasWidth}"></canvas>
	</div>
</template>

<script>
	import {
		base64ToPath,
		pathToBase64
	} from '@/components/html2canvas/image-tools.js';
	import Refresh from '@/$ma/common/js/refresh.js';
	export default {
		data() {
			return {
				avtivityInfo: {},
				page: new Refresh(this, {
					apiName: 'getRanking',
					id: 0
				}),
				show: false,
				canvasImg: '',
				domId: '',
				askCodeSelf: '',
				qrcodeImg: '',
				animateShow: false,
				imageInfo: null,
				loading: true,
				myInfo: {}
			}
		},
		methods: {
			fuzhi(data) {
				uni.setClipboardData({
					data: data,
					success: function(data) {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
			onCopy() {
				this.fuzhi(this.getShareUrl());
			},
			//生成二维码图片
			async getQrcode() {
				if (this.qrcodeImg) return;
				let res = await this.$u.api.getQrcode({
					content: this.getShareUrl()
				})
				console.log('153454', res)
				this.qrcodeImg = await new Promise((resolve,reject) => {
					uni.getImageInfo({
						src: res.msg,
						success: r =>{
							resolve(r.path)
						}
					})
				});
			},
			save() {
				uni.showToast({
					icon: 'none',
					title: '请长按上图保存图片'
				});
				return;
			},
			async getActivityInfo() {
				let res = await this.$u.api.getActivityInfo();
				this.avtivityInfo = res;
				
				uni.getImageInfo({
					src: res.img1,
					success: r=>{
						console.log('图片的信息',r)
						this.imageInfo = r;
					}
				})
			},
			async getInfo() {
				let id = this.avtivityInfo.id;
				console.log('id', this.avtivityInfo.id)
				this.$u.api.getRankingMy({}, id).then(res => {
					this.myInfo = res;
				})
			},
			toDetail(){
				this.$ma.route.inviteDetail({
					id: this.avtivityInfo.id
				})
			},
			async onJoin() {
				if (this.canvasImg) this.show = true;
				else {
					await this.getQrcode();
					uni.showLoading({
						title: '生成中...',
						mask: true
					})
					const ctx = uni.createCanvasContext('canvasId',this);
					const { width,height,path } = this.imageInfo;
					ctx.setFillStyle('white')
					ctx.fillRect(0, 0, width, height)
					ctx.drawImage(path,0,0,width,height)
					let right = 25;
					let size = 125;
					ctx.drawImage(this.qrcodeImg,width - 200 - right,height - right - 200,200,200 );
					ctx.draw(false, setTimeout(async () => {
						wx.canvasToTempFilePath({
							x: 0,
							y: 0,
							canvasId: 'canvasId',
							success: (res) => {
								this.canvasImg = res.tempFilePath
								uni.hideLoading();
								this.show = true;
							},
							fail: (err) => {
								console.log(err)
							}
						}, this)
						//将canvas转成图片
						// this.canvasUrl = await this.onDraw('myCanvas');
					},300))
					// await this.$refs.canvas.create(this.domId);
					// setTimeout(() => {
					// 	uni.hideLoading()
					// 	this.show = true;
					// }, 500)
				}
			},
			renderFinish(filePath) {
				this.canvasImg = filePath;
			},
			getShareUrl() {
				let baseUrl = 'https://www.jiugemeta.com/#/pages/registered/registered';
				// let baseUrl = 'http://localhost:8080/#/pages/registered/registered';
				let query = `?loginType=registerLogin&askCode=${this.askCodeSelf}`;
				return baseUrl + query;
			},
		},
		computed: {
			canvasHeight() {
				if(this.imageInfo) {
					return this.imageInfo.height + 'px';
				}
				return '200px';
			},
			canvasWidth() {
				if(this.imageInfo) {
					return this.imageInfo.width + 'px';
				}
				return '200px';
			}
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			this.askCodeSelf = this.user.myInfo.user.askCodeSelf;
			await this.getActivityInfo();
			await this.$nextTick(async res => {
				await this.getInfo();
				this.page.id = this.avtivityInfo.id;
				await this.page.onRefresh();
				uni.hideLoading();
				await this.getQrcode();
			})
			setTimeout(()=>{
				this.animateShow = true;
			},1000)
		},
		mounted() {
			this.domId = '#poster';
		}
	}
</script>

<style lang="scss">
	.abs{
		position: absolute;
		left: 17.53vw;
		bottom: 8.53vw;
	}
	.center{
		justify-content: center;
	}
	.between{
		justify-content: space-between;
	}
	
	canvas {
		position: fixed;
		left: 99999px;
		top: 0;
		background-color: blue;
	}
	.pulse-one {
		animation: pulse 2s ease-in-out infinite;
		display: block;
	}
	
	@keyframes pulse {
	
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.08, 1.08, 1.08);
			transform: scale3d(1.08, 1.08, 1.08);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
	}
	
	.canvas {
		position: absolute;
		// left: 99999;
		left: 0;
		// z-index: 99999999999999999999999;
	}

	.canvasImg {
		// transform: scale(2);
		width: 89.33vw;
		display: block;
		// margin-bottom: 3.73vw;
		// border-radius: 6.4vw;
		z-index: -1;
		position: absolute;
		top: 13.87vw;
		height: 130.67vw;
		overflow: scroll;
		image {
			width: 100%;
		}
	}

	.qrcode-img {
		width: 14.93vw;
		height: 14.93vw;
		border-radius: 2.13vw;
		background-color: #BBB;
		// z-index: 3;
		position: absolute;
		right: 4.27vw;
		bottom: 4.27vw;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100vh;
		width: 100vw;
		background-color: #000;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;


		.modal {
			display: flex;
			flex-direction: column;
			align-items: center;

			.button-box {
				padding-top: 4.27vw;
				border-radius: 6.4vw 6.4vw 0 0;
				background-color: #1B1B1B;
				width: 100%;
				display: flex;
				flex-direction: column;
				z-index: 3;

				.flex-row {
					display: flex;
					align-items: center;
					padding: 0 14.93vw;
					justify-content: space-between;
					padding-top: 2.13vw;
					padding-bottom: calc(4.27vw + constant(safe-area-inset-bottom));
					padding-bottom: calc(4.27vw + env(safe-area-inset-bottom));
				}

				.flex-column {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						height: 14.93vw;
						width: 14.93vw;
					}

					span {
						font-size: 3.2vw;
						color: #FFF;
						margin-top: 1.33vw;
					}
				}

				.cancel-box {
					width: 100%;
					box-sizing: content-box;
					height: 17.07vw;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);
					display: flex;
					align-items: center;
					justify-content: center;

					.cancel-button {
						width: 89.33vw;
						height: 12.8vw;
						font-size: 3.73vw;
						color: #555;
						background-color: #000;
						border-radius: 6.4vw;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.top-box {
		border-radius: 6.4vw;
		width: 82.93vw;
		background-color: #1B1B1B;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name-box {
			height: 10.93vw;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 6.4vw;

			.logo-img {
				width: 4.27vw;
				height: 4.27vw;
				margin-right: 2.13vw;
				display: block;
			}

			span {
				height: 4.27vw;
				width: 4.27vw;
				background: linear-gradient(180deg, #FFCE80 0%, #A972FF 100%);
				border-radius: 50%;
				display: block;
				margin-right: 2.13vw;
			}

			.top-box-name {
				font-size: 3.2vw;
				color: #bbb;
			}
		}

		&-cover {
			height: 74.4vw;
			width: 74.4vw;
			display: block;
			background-color: #BBB;
			border-radius: 6.4vw;
		}

		.line-box {
			padding-top: 4.27vw;
			width: 100%;
			// overflow: hidden;
			position: relative;

			&:after {
				content: '';
				height: 4.27vw;
				width: 4.27vw;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #000;
			}

			&:before {
				content: '';
				height: 4.27vw;
				width: 4.27vw;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(50%, -50%);
				background-color: #000;
			}

			.dashed {
				background: linear-gradient(to left,
					transparent 0%,
					transparent 50%,
					#000 50%,
					#000 100%);
				background-size: 16px 1px;
				background-repeat: repeat-x;
				width: 100%;
				height: 1px;
			}
		}

		.qrcode-box {
			display: flex;
			align-items: center;
			padding: 4.27vw 4.27vw 4.27vw 6.4vw;

			.flex-column {
				flex: 1;
				display: flex;
				flex-direction: column;

				span {
					font-size: 3.73vw;
					color: #AAA;
				}

				p {
					font-size: 3.2vw;
					color: #535353;
					margin-top: 0.53vw;
				}
			}


		}
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
		transform: rotate(90deg);
	}

	.image853 {
		width: 8.53vw;
		height: 8.53vw;
		background-color: #222222;
		border-radius: 50%;
	}

	.image64 {
		width: 6.4vw;
		height: 6.4vw;
		position: absolute;
		z-index: 9;
		top: 3.2vw;
		left: 1vw;
	}

	.look-text {
		font-size: 3.73vw;
		font-weight: 300;
		color: #A972FF;
	}

	.header-box {
		padding: 5.33vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.big-box {
		padding: 0 5.33vw;
		position: relative;
		text-align: center;

			.btn {
				flex: 1;
				line-height: 12.8vw;
				display: block;
				justify-content: center;
				background: #A972FF;
				border-radius: 6.4vw;
				text-align: center;
				z-index: 2;
				width: 78.67vw;
				position: absolute;
				bottom: 5.33vw;
				left: 10.67vw;
		}
	}

	.enter-box {
		background-color: #1B1B1B;
		text-align: center;
		border-radius: 6.4vw 6.4vw 0 0;
		margin-top: 5.33vw;
	}

	.list-box {
		padding: 4.27vw 5.33vw;
		background-color: #1B1B1B;

		.item-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			position: relative;
			align-items: center;
		}

		.item-box:nth-child(2) {
			margin-bottom: 13.6vw;

			.image64 {
				top: -2.93vw;
			}
		}

		.header-img {
			width: 17.07vw;
			height: 17.07vw;
			border-radius: 50%;
		}

	}

	.table-list {
		background-color: #000;

		.table-item {
			padding: 4.27vw 5.33vw;
			background-color: #1b1b1b;
			margin-top: 0.27vw;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
